import React from "react";
import { useNavigate } from "react-router-dom";
type Homeitem = {
  img: string;
  text: string;
  id: number;
};

type Props = {
  data: Array<Homeitem>;
};

function Home(props: Props) {
  const navigate = useNavigate();

  const del = (item: any) => {
    navigate("/list/" + item.id, { state: item });
    console.log(item);
  };
  return (
    <div>
      {props.data.map((item: Homeitem) => {
        return (
          <div onClick={() => del(item)}>
            <img src={item.img} alt="" />
            <span>{item.text}</span>
          </div>
        );
      })}
    </div>
  );
}

export default Home;
